<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓库管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css">
    <style>
        body {
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 300;
        }
        
        .main-container {
            display: flex;
            height: calc(100vh - 70px);
        }
        
        .sidebar {
            width: 250px;
            background-color: #fff;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .nav-item {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        .nav-item:hover {
            background-color: #f8f9fa;
            color: #667eea;
        }
        
        .nav-item.active {
            background-color: #667eea;
            color: white;
        }
        
        .nav-item i {
            margin-right: 10px;
            font-size: 16px;
        }
        
        .nav-item span {
            font-size: 14px;
        }
        
        .dashboard {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .dashboard h2 {
            color: #333;
            margin-bottom: 30px;
            font-weight: 300;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .stat-card h3 {
            margin: 0 0 10px 0;
            font-size: 36px;
            font-weight: 300;
        }
        
        .stat-card p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
        }
        
        .welcome-section {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 30px;
            border-radius: 8px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .welcome-section h3 {
            margin: 0 0 15px 0;
            font-size: 24px;
            font-weight: 300;
        }
        
        .welcome-section p {
            margin: 0;
            font-size: 16px;
            opacity: 0.9;
        }
        
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .action-btn {
            background: white;
            color: #333;
            border: none;
            padding: 15px 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .action-btn i {
            display: block;
            font-size: 24px;
            margin-bottom: 8px;
            color: #667eea;
        }
        
        .action-btn span {
            font-size: 14px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <h1><i class="layui-icon layui-icon-home"></i> 仓库管理系统</h1>
    </div>
    
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="nav-item active" onclick="showDashboard()">
                <i class="layui-icon layui-icon-home"></i>
                <span>系统首页</span>
            </div>
            <div class="nav-item" onclick="goToCustomers()">
                <i class="layui-icon layui-icon-user"></i>
                <span>客户管理</span>
            </div>
            <div class="nav-item" onclick="goToProducts()">
                <i class="layui-icon layui-icon-cart"></i>
                <span>商品管理</span>
            </div>
            <div class="nav-item" onclick="goToCategories()">
                <i class="layui-icon layui-icon-tabs"></i>
                <span>分类管理</span>
            </div>
            <div class="nav-item" onclick="goToOrders()">
                <i class="layui-icon layui-icon-form"></i>
                <span>订单管理</span>
            </div>
            <div class="nav-item" onclick="showModule('stock-in')">
                <i class="layui-icon layui-icon-add-1"></i>
                <span>入库管理</span>
            </div>
            <div class="nav-item" onclick="showModule('stock-out')">
                <i class="layui-icon layui-icon-delete"></i>
                <span>出库管理</span>
            </div>
            <div class="nav-item" onclick="showModule('reports')">
                <i class="layui-icon layui-icon-chart"></i>
                <span>统计报表</span>
            </div>
            <div class="nav-item" onclick="showModule('settings')">
                <i class="layui-icon layui-icon-set"></i>
                <span>系统设置</span>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="content">
            <!-- 首页仪表板 -->
            <div id="dashboard" class="dashboard">
                <h2><i class="layui-icon layui-icon-home"></i> 系统概览</h2>
                
                <!-- 欢迎区域 -->
                <div class="welcome-section">
                    <h3>欢迎使用仓库管理系统</h3>
                    <p>高效管理您的仓库业务，提升运营效率</p>
                </div>
                
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <h3 id="customerCount">0</h3>
                        <p>客户总数</p>
                    </div>
                    <div class="stat-card">
                        <h3 id="productCount">0</h3>
                        <p>商品总数</p>
                    </div>
                    <div class="stat-card">
                        <h3 id="orderCount">0</h3>
                        <p>订单总数</p>
                    </div>
                    <div class="stat-card">
                        <h3 id="stockInCount">0</h3>
                        <p>今日入库</p>
                    </div>
                </div>
                
                <!-- 快速操作 -->
                <h3 style="margin-bottom: 20px; color: #333;">快速操作</h3>
                <div class="quick-actions">
                    <div class="action-btn" onclick="goToCustomers()">
                        <i class="layui-icon layui-icon-user"></i>
                        <span>添加客户</span>
                    </div>
                    <div class="action-btn" onclick="goToProducts()">
                        <i class="layui-icon layui-icon-cart"></i>
                        <span>添加商品</span>
                    </div>
                    <div class="action-btn" onclick="goToOrders()">
                        <i class="layui-icon layui-icon-form"></i>
                        <span>创建订单</span>
                    </div>
                    <div class="action-btn" onclick="showModule('stock-in')">
                        <i class="layui-icon layui-icon-add-1"></i>
                        <span>商品入库</span>
                    </div>
                    <div class="action-btn" onclick="showModule('stock-out')">
                        <i class="layui-icon layui-icon-delete"></i>
                        <span>商品出库</span>
                    </div>
                    <div class="action-btn" onclick="showModule('reports')">
                        <i class="layui-icon layui-icon-chart"></i>
                        <span>查看报表</span>
                    </div>
                </div>
            </div>
            
            <!-- 其他模块内容区域 -->
            <div id="module-content" style="display: none;">
                <div class="dashboard">
                    <h2 id="module-title">模块标题</h2>
                    <div id="module-body">
                        <p>模块功能开发中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        // 页面加载完成后执行
        layui.use(['layer'], function(){
            var layer = layui.layer;
            
            // 加载统计数据
            loadDashboardStats();
        });
        
        // 显示首页
        function showDashboard() {
            document.getElementById('dashboard').style.display = 'block';
            document.getElementById('module-content').style.display = 'none';
            updateActiveNav('dashboard');
            loadDashboardStats();
        }
        
        // 显示模块
        function showModule(moduleName) {
            document.getElementById('dashboard').style.display = 'none';
            document.getElementById('module-content').style.display = 'block';
            
            const moduleTitles = {
                'customers': '客户管理',
                'products': '商品管理',
                'orders': '订单管理',
                'stock-in': '入库管理',
                'stock-out': '出库管理',
                'reports': '统计报表',
                'settings': '系统设置'
            };
            
            document.getElementById('module-title').innerHTML = 
                '<i class="layui-icon layui-icon-' + getModuleIcon(moduleName) + '"></i> ' + 
                moduleTitles[moduleName];
            
            document.getElementById('module-body').innerHTML = 
                '<div style="text-align: center; padding: 50px; color: #999;">' +
                '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 50px; margin-bottom: 20px;"></i>' +
                '<p>模块功能开发中，敬请期待...</p>' +
                '</div>';
            
            updateActiveNav(moduleName);
        }
        
        // 获取模块图标
        function getModuleIcon(moduleName) {
            const icons = {
                'customers': 'user',
                'products': 'cart',
                'orders': 'form',
                'stock-in': 'add-1',
                'stock-out': 'delete',
                'reports': 'chart',
                'settings': 'set'
            };
            return icons[moduleName] || 'home';
        }
        
        // 更新导航激活状态
        function updateActiveNav(activeModule) {
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => item.classList.remove('active'));
            
            if (activeModule === 'dashboard') {
                navItems[0].classList.add('active');
            } else {
                const moduleIndex = {
                    'customers': 1,
                    'products': 2,
                    'orders': 3,
                    'stock-in': 4,
                    'stock-out': 5,
                    'reports': 6,
                    'settings': 7
                };
                if (moduleIndex[activeModule]) {
                    navItems[moduleIndex[activeModule]].classList.add('active');
                }
            }
        }
        
        // 加载仪表板统计数据
        function loadDashboardStats() {
            // 调用后端API获取实际数据
            fetch('/api/dashboard/stats')
                .then(response => response.json())
                .then(data => {
                    console.log('API返回数据:', data); // 调试日志
                    if (data.code === 200) {
                        const stats = data.data;
                        document.getElementById('customerCount').textContent = stats.customerCount || 0;
                        document.getElementById('productCount').textContent = stats.productCount || 0;
                        document.getElementById('orderCount').textContent = stats.orderCount || 0;
                        document.getElementById('stockInCount').textContent = stats.todayStockInCount || 0;
                    } else {
                        console.error('获取统计数据失败:', data.message);
                        // 如果API调用失败，使用默认值
                        document.getElementById('customerCount').textContent = '0';
                        document.getElementById('productCount').textContent = '0';
                        document.getElementById('orderCount').textContent = '0';
                        document.getElementById('stockInCount').textContent = '0';
                    }
                })
                .catch(error => {
                    console.error('API调用失败:', error);
                    // 如果API调用失败，使用默认值
                    document.getElementById('customerCount').textContent = '0';
                    document.getElementById('productCount').textContent = '0';
                    document.getElementById('orderCount').textContent = '0';
                    document.getElementById('stockInCount').textContent = '0';
                });
        }
        
        // 跳转到客户管理页面
        function goToCustomers() {
            window.location.href = 'customers.html';
        }
        
        // 跳转到商品管理页面
        function goToProducts() {
            window.location.href = 'products.html';
        }
        
        // 跳转到分类管理页面
        function goToCategories() {
            window.location.href = 'categories.html';
        }

        // 跳转到订单管理页面
        function goToOrders() {
            window.location.href = 'orders.html';
        }


        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示首页
            showDashboard();
        });
    </script>
</body>
</html> 